<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      body {
         background-color: #eeeeee;
         overflow: hidden;
      }

      * {
         margin: 0;
         padding: 0;
      }

      .one {
         position: absolute;
         bottom: 5px;
         width: 3840px;
         height: 336px;
         background: url(media/bg1.png) repeat-x;
         animation: one 30s infinite linear;
      }

      .two {
         position: absolute;
         width: 200px;
         height: 100px;
         background: url(media/bear.png);
         animation: one .6s steps(8) infinite, two 1.5s forwards;

      }

      .box {
         position: absolute;
         bottom: 10px;
         width: 3840px;
         height: 569px;
         background: url(media/bg2.png) repeat-x;
         animation: one 60s infinite linear;
      }

      @keyframes one {
         0% {
            background-position: 0 0;
         }

         100% {
            background-position: -1600px 0;
         }
      }

      @keyframes two {
         0% {
            left: -200px;
            bottom: 0px;
         }

         100% {
            left: 25%;
            bottom: 60px;
            transform: translateX(-50%);
         }
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="one">
         <div class="two"></div>
      </div>
   </div>

</body>

</html>